<template>


      <div :class="className" :style="{height:height,width:width,marginTop:marginTop,marginLeft:marginLeft}" />


</template>

<script>
import * as echarts from 'echarts';
require('echarts/theme/macarons') // echarts theme
import resize from './mixins/resize'

export default {
  mixins: [resize],

  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '400px'
    },
    marginTop: {
      type: String,
      default: '50px'
    },
    marginLeft: {
      type: String,
      default: '-40px'
    }
  },
  data() {
    return {
      chart: null,

    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {
      this.chart = echarts.init(this.$el, 'macarons')

      this.chart.setOption({
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 0,
          top: 0,
          bottom: 40,
          data: ['源头站点1', '源头站点2', '源头站点3', '源头站点4', '源头站点5','源头站点6', '源头站点7', '源头站点8', '源头站点9', '源头站点10',
          '源头站点11', '源头站点12', '源头站点13', '源头站点14', '源头站点15','源头站点16', '源头站点17', '源头站点18', '源头站点19',]
        },
        series: [
          {
            name: 'WEEKLY WRITE ARTICLES',
            type: 'pie',
            roseType: 'radius',
            radius: [15, 95],
            center: ['50%', '38%'],
            data: [
              { value: 320, name: '源头站点1' },
              { value: 240, name: '源头站点2' },
              { value: 149, name: '源头站点3' },
              { value: 100, name: '源头站点4' },
              { value: 100, name: '源头站点5' },
              { value: 100, name: '源头站点6' },
              { value: 100, name: '源头站点7' },
              { value: 100, name: '源头站点8' },
              { value: 100, name: '源头站点9' },
              { value: 159, name: '源头站点10' },
              { value: 320, name: '源头站点11' },
              { value: 240, name: '源头站点12' },
              { value: 149, name: '源头站点13' },
              { value: 100, name: '源头站点14' },
              { value: 100, name: '源头站点15' },
              { value: 100, name: '源头站点16' },
              { value: 100, name: '源头站点17' },
              { value: 100, name: '源头站点18' },
              { value: 100, name: '源头站点19' },
            ],
            animationEasing: 'cubicInOut',
            animationDuration: 2600
          }
        ]
      })
    }
  }
}
</script>
